import type {
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
  CrudExpose,
} from '@fast-crud/fast-crud';

import type { FormRulesExt } from '#/api';
import type { DefDictModel } from '#/api/devOperation/system/model/defDictModel';
import type { ActionEnum } from '#/enums/commonEnum';

import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { $t } from '@vben/locales';

import { DefDictApi } from '#/api/devOperation/system/defDict';
import { RouteEnum } from '#/enums/commonEnum';
import {
  createdTimeColumn,
  deleteButton,
  indexColumn,
  STATE_CONSTANT_DICT,
  transformQuery,
} from '#/plugins/fast-crud/common';

export function createCrudOptions(
  props: CreateCrudOptionsProps<DefDictModel.DefDictResultVO, any>,
): CreateCrudOptionsRet<DefDictModel.DefDictResultVO> {
  const selectedRowKeys = ref<string[]>([]);
  const { push } = useRouter();
  return {
    crudOptions: {
      request: {
        pageRequest: DefDictApi.pageRequest,
        addRequest: DefDictApi.addRequest,
        editRequest: DefDictApi.editRequest,
        delRequest: DefDictApi.delRequest,
        infoRequest: DefDictApi.infoRequest,
        transformQuery: (query) => {
          const tq = transformQuery(query);
          tq.sort = 'createdTime';
          tq.order = 'desc';
          return tq;
        },
      },
      form: {
        col: { span: 24 },
      },
      actionbar: {
        buttons: {
          ...deleteButton({
            crudExpose: props.crudExpose,
            selectedRowKeys,
            removeFn: DefDictApi.remove,
          }),
        },
      },
      table: {
        striped: true,
        rowKey: 'id',
        rowSelection: {
          type: 'checkbox',
          selectedRowKeys,
          onChange: (changed: string[]) => {
            selectedRowKeys.value = changed;
          },
        },
      },
      rowHandle: {
        width: '220px',
        buttons: {
          item: {
            order: 0,
            text: '字典项',
            size: 'small',
            type: 'link',
            click(context) {
              const record = context.row;
              push({
                name: RouteEnum.DICT_ITEM,
                params: { dictId: record.id },
                query: {
                  name: record.name,
                  key: record.key,
                  remark: record.remark,
                },
              });
            },
          },
          view: { show: false },
        },
      },
      columns: {
        ...indexColumn(props.crudExpose),
        key: {
          title: $t('devOperation.system.defDict.key'),
          // type: ['text', 'copyable'],
          type: ['text'],
          search: { show: true },
        },
        name: {
          title: $t('devOperation.system.defDict.name'),
          type: 'text',
          search: { show: true },
        },
        state: {
          title: $t('devOperation.system.defDict.state'),
          type: 'dict-radio',
          dict: STATE_CONSTANT_DICT,
          search: { show: true, component: { mode: 'multiple' } },
          addForm: { value: true },
          column: { width: 80 },
        },
        sortValue: {
          title: $t('devOperation.system.defDict.sortValue'),
          type: 'number',
          column: {
            show: false,
          },
        },
        remark: {
          title: $t('devOperation.system.defDict.remark'),
          type: 'textarea',
          column: { show: false },
        },
        ...createdTimeColumn({}),
      },
    },
  };
}

export const frontRules = (
  _crudExpose: CrudExpose,
  _mode: ActionEnum,
): FormRulesExt => {
  return {};
};
